<template>
    <div class="eqEventSlot">
        <appFrame :selected="3" leftText="事件" rightIcon="icongw-icon-shaixuan" rightIconTip="" rightIconSize="22" @rightClick="onQuery">
            <div class="eqEvent">
                <!-- app界面btn批量操作抽屉 -->
                <el-drawer class="drawerAppHeader" size="100%" :visible.sync="drawerAppHeader" direction="btt" :before-close="closeDrawerAppHeader" :show-close="false">
                    <div class="header" slot="title">
                        <i @click="closeDrawerAppHeader()" class="iconfont icongw-icon-guangbi"></i>
                        <span class="flex1 flex-center title">
                            {{ $t('eqEvent.appHeader[4]') }}
                        </span>
                    </div>

                    <div class="calendar">
                        <p>{{ $t('eqEvent.appHeader[0]') }}</p>
                        <!-- <el-date-picker format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" @change="appStartTime" v-model="appStartTimeValue" type="datetime" :placeholder="$t('eqEvent.appHeader[3]')"></el-date-picker> -->
                        <timeSelect v-model="appStartTimeValue"></timeSelect>
                        <p>{{ $t('eqEvent.appHeader[1]') }}</p>
                        <timeSelect v-model="appEndTimeValue"></timeSelect>
                        <!-- <el-date-picker default-time="[23:59:59]" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" @change="appEndTime" v-model="appEndTimeValue" type="datetime" :placeholder="$t('eqEvent.appHeader[3]')"></el-date-picker> -->
                    </div>
                    <div class="select-box">
                        <p>
                            {{ $t('eqEvent.mainHeader.typeNm') }}
                            <el-tooltip class="item" effect="dark" content="系统事件查询不需要选择设备" placement="top-end">
                                <i class="iconfont icon_tulishuoming icons"></i>
                            </el-tooltip>
                        </p>
                        <el-select v-model="eventType" :placeholder="$t('eqEvent.appHeader[2]')" @change="changeTypeList">
                            <el-option v-for="(item, index) in eventTypeList" :key="index" :label="$t(item.name)" :value="item.type"></el-option>
                        </el-select>
                        <div v-if="showTip" class="selectEquipTip">请选择设备</div>
                    </div>
                    <el-button type="primary" :loading="searBtnLoading" @click="searchEvt(false)">
                        {{ $t('eqEvent.cx') }}
                    </el-button>
                </el-drawer>

                <div class="left wh100" id="eqTableAppHeight">
                    <div class="title">
                        <!-- <p class="flex-between-center ">
                            <el-tooltip class="item" effect="dark" content="系统事件查询不需要选择设备" placement="top-end">
                                <i class="iconfont icon_tulishuoming icons"></i>
                            </el-tooltip>
                            <span class="filterBtn" @click="onQuery()">条件筛选</span>
                        </p> -->
                        <el-input v-model="scout" :placeholder="$t('eqEvent.appHeader[5]')" @input="inputChange" @focus="() => (showBottom = false)" @keyup.enter.native="scoutEq" clearable>
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </div>
                    <div class="equipList_main" v-loading="nodeLoad">
                        <span v-if="!equipList" class="promptResults">
                            {{ $t('publics.noData') }}
                        </span>
                        <myTree ref="myTree" :data="equipList" nodeKey="key" :props="defaultProps" iconClass="iconfont icongw-icon-biaoti-xiala" :height="100" show-checkbox defaultExpandAll></myTree>
                    </div>
                </div>

                <el-drawer class="drawerAppHeader" size="80%" :visible.sync="showDataDialog" direction="btt" @close="closeDrawer" :show-close="false">
                    <div class="header result-title" slot="title">
                        筛查结果
                    </div>
                    <div class="dataDialog">
                        <ul class="list" v-infinite-scroll="getList" infinite-scroll-immediate="false">
                            <div v-for="(item, index) in dataList" :key="index" class="dataItem flex-between-center" @click="showDetail(item)">
                                <div class="left flex1 flex-column">
                                    <p class="time"><i class="el-icon-time"></i> {{ item.time }}</p>
                                    <p class=" content line2">{{ item.event }}</p>
                                    <p class="remark">{{ item.confirmremark }}</p>
                                </div>
                                <!-- <div class="toDetail">
                                    <i class="iconfont iconfangxiangL"></i>
                                </div> -->
                            </div>
                        </ul>
                        <p v-if="searBtnLoading">加载中...</p>
                    </div>
                </el-drawer>

                <el-drawer class="drawerAppHeader" size="100%" :visible.sync="showDataDetail" direction="btt" @close="closeDrawer" :show-close="false">
                    <div class="header result-title" slot="title">
                        <i class="iconfont icongw-icon-fanghui" @click="showDataDetail = false"></i>
                        <p>{{dataItem.equip_nm}}</p>
                    </div>
                    <div class="dataDetail" v-if="showDataDetail">
                        <p class="title">{{ dataItem.event.split('---by:')[0] }}</p>
                        <div class="content">
                            <div class="time">
                                <span class="label"><i class="iconfont icongw-icon-shijian-shijian"></i>时间</span>
                                <span class="value">{{ dataItem.time }}</span>
                            </div>
                            <div class="equiName" v-if="dataItem.equip_nm">
                                <span class="label"><i class="iconfont icongw-icon-shijian-mingcheng"></i>设备名称</span>
                                <span class="value">{{ dataItem.equip_nm }}</span>
                            </div>
                            <div class="oparator" v-if="dataItem.event.split('---by:')[1]">
                                <span class="label"><i class="iconfont icongw-icon-shijian-renyuan"></i>操作人员</span>
                                <span class="value">
                                    {{ dataItem.event.split('---by:')[1] }}
                                </span>
                            </div>
                            <div class="oparator" v-if="dataItem.confirmremark">
                                <span class="label"><i class="iconfont icongw-icon-shijian-renyuan"></i>处理意见</span>
                                <span class="value">
                                    {{ dataItem.confirmremark }}
                                </span>
                            </div>
                            <!-- <div class="event flex-start flex-column">
                                <span class="label w100 flex-start">事件内容</span>
                                <span class="value w100 flex-start eventValue">
                                    {{ dataItem.event.split('---by:')[0] }}
                                </span>
                            </div> -->
                        </div>
                    </div>
                </el-drawer>
            </div>
        </appFrame>
    </div>
</template>
<script>
import eqEvent from './js/eqEvent.js'
export default eqEvent
</script>
<style scoped lang="scss" src="./css/eqEvent.scss"></style>
